<template>
  <div class="tabbar-item" @click="btnClick">
    <div :style="activecolor">
      <slot name="item_img"></slot>
    </div>
    <div :style="activecolor">
      <slot name="item_text"></slot>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "tabbar_item", // 组件参数 接收来自父组件的数据
  props: {
    path: String,
    activeColor: {
      type: String,
      default: "red",
    },
  }, // 局部注册的组件
  components: {}, // 组件状态值
  data() {
    return {};
  },
  methods: {
    btnClick() {
      this.$router.push(this.path);
    },
  },
  computed: {
    isActive() {
      return this.$route.path.includes(this.path);
    },
    activecolor() {
      return this.isActive ? { color: this.activeColor } : {};
    },
  },
};
</script>
<style scoped>
/* ~assets 是设置路径别名 但是注意前面需要加~  */
@import "~assets/css/font/iconfont.css";
.tabbar-item {
  display: flex;
  line-height: 1.2;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  height: 49px;
}
i {
  font-size: 20px;
}
</style>